<template>
  <div class="userList">
    <el-card class="box-card">
      <!--    面包屑导航-->
      <div slot="header" class="clearfix">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!--    筛选表单-->
      <el-form ref="form" :model="query" label-width="70px" size="mini">
        <el-form-item label="搜索用户">
          <el-input v-model="query.keywords" style="width: 250px" placeholder="请输入用户ID" @keyup.enter.native="getUserList"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="resource">
          <el-radio-group v-model="userList.authorities">
            <el-radio label="1">admin</el-radio>
            <el-radio label="2">visitor</el-radio>
            <el-radio label="3">oauth</el-radio>
            <el-radio label="4">user</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getUserList" :loading="isSearching">筛选</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!--  商品展示列表 @expand-change="expandSelect"    :row-key='getRowKeys'
        :expand-row-keys='expands'-->
    <el-card class="box-card">
<!--      @row-click="findUserOne"-->
      <el-table
        :data="userList"
        style="width: 100%"
        v-loading="isSearching"
        @expand-change="expandSelect"
        :row-key="getRowKeys"
        :expand-row-keys="expands"
      >
        <el-table-column
          label="头像">
          <template slot-scope="scope">
            <el-image
              style="width: 50px; height: 50px"
              :src="scope.row.headPic"
              fit="cover"
              lazy
            >
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          label="用户ID" width="200px">
        </el-table-column>
        <el-table-column
          prop="nickName"
          label="昵称">
        </el-table-column>
        <el-table-column
          prop="gmtCreate"
          sortable
          label="注册时间">
        </el-table-column>
        <el-table-column
          prop="lastLoginTime"
          sortable
          label="最后登录时间">
        </el-table-column>
        <el-table-column
          prop="lastLoginIP"
          label="最后登录IP"
          width="100px"
        >
        </el-table-column>
        <el-table-column
          type="expand"
          width="100px"
          label="用户权限"
        >
          <template slot-scope="scope" >
            <el-tag
              v-for="(au, index) in scope.row.authorities.split(',')"
              :key="index"
              closable
              :disable-transitions="false"
              @close="handleClose(au,scope.$index,scope.row.username)">
              {{au}}
            </el-tag>
<!--            <el-input-->
<!--              class="input-new-tag"-->
<!--              v-if="inputVisible"-->
<!--              v-model="inputValue"-->
<!--              ref="saveTagInput"-->
<!--              size="small"-->
<!--              @keyup.enter.native="$event.target.blur"-->
<!--              @blur="handleInputConfirm(scope.$index,scope.row.username)"-->
<!--            >-->
<!--            </el-input>-->
            <el-select v-model="inputValue" placeholder="请选择" style="margin-left: 10px" v-if="inputVisible" size="small" ref="saveTagInput">
              <el-option
                v-for="item in scope.row.unAuthorize"
                :key="item"
                :label="item"
                :value="item"
                >
              </el-option>
            </el-select>
            <el-button  @keyup.enter.native="$event.target.click"
                        @click="handleInputConfirm(scope.$index,scope.row.id)"
                        v-if="inputVisible"
                        size="small"
                        style="margin-left: 10px"
            >添加
            </el-button>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="150px"
        >
          <!-- 如果需要自定义表格列模板，则把需要自定义的内容放到 template 里面 -->
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="删除用户" placement="top-end">
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                :loading="isDeleting"
                circle
                @click="deleteUser(scope.row.id)"
              ></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="查看用户" placement="top-end">
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-more"
                circle
                @click="findUserOne(scope.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!--    分页栏-->
    <el-pagination
      class="page"
      background
      layout="prev, pager, next"
      :current-page.sync = page
      :page-size.sync = size
      @current-change = pageChange
      :total="total">
    </el-pagination>
    <!--      品牌添加弹框-->
    <el-dialog
      title= "用户信息"
      :visible.sync="dialogFormVisible"
      append-to-body
      style="overflow:auto !important;"
      @close="closeForm"
    >
      <el-row style="min-height: 400px">
        <el-col :span="15">
          <el-form
            ref="userInfo"
            label-width="110px"
            class="update-form"
            :model="userForm"
          >
            <el-form-item label="用户ID" prop="id" ><el-input v-text="userForm.id"></el-input></el-form-item>
            <el-form-item label="注册手机号" prop="phone" ><el-input v-text="userForm.phone"></el-input></el-form-item>
            <el-form-item label="注册邮箱" prop="phone" ><el-input v-text="userForm.email"></el-input></el-form-item>
            <el-form-item label="注册时间" prop="gmtCreate" ><el-input v-text="userForm.gmtCreate"></el-input></el-form-item>
            <el-form-item label="修改时间" prop="gmtModified" ><el-input v-text="userForm.gmtModified"></el-input></el-form-item>
            <el-form-item label="会员来源" prop="sourceType" ><el-input v-text="userForm.sourceType"></el-input></el-form-item>
            <el-form-item label="昵称" prop="nickName" ><el-input v-text="userForm.nickName"></el-input></el-form-item>
            <el-form-item label="真实姓名" prop="name" ><el-input v-text="userForm.name"></el-input></el-form-item>
            <el-form-item label="使用状态" prop="status" ><el-input v-text="userForm.status"></el-input></el-form-item>
            <el-form-item label="qq" prop="qq" ><el-input v-text="userForm.qq"></el-input></el-form-item>
            <el-form-item label="手机是否验证" prop="isMobileCheck" ><el-input v-text="userForm.isMobileCheck"></el-input></el-form-item>
            <el-form-item label="邮箱是否检测" prop="isEmailCheck" ><el-input v-text="userForm.isEmailCheck"></el-input></el-form-item>
            <el-form-item label="性别" prop="sex" ><el-input v-text="userForm.sex"></el-input></el-form-item>
            <el-form-item label="会员等级" prop="userLevel" ><el-input v-text="userForm.userLevel"></el-input></el-form-item>
            <el-form-item label="积分" prop="points" ><el-input v-text="userForm.points"></el-input></el-form-item>
            <el-form-item label="经验值" prop="experienceValue" ><el-input v-text="userForm.experienceValue"></el-input></el-form-item>
            <el-form-item label="出生年月日" prop="birthday" ><el-input v-text="userForm.birthday"></el-input></el-form-item>
            <el-form-item label="最后登录时间" prop="lastLoginTime" ><el-input v-text="userForm.lastLoginTime"></el-input></el-form-item>
            <el-form-item label="最后登录IP" prop="lastLoginIP" ><el-input v-text="userForm.lastLoginIP"></el-input></el-form-item>
            <el-form-item label="用户权限" prop="authorities" ><el-input v-text="userForm.authorities"></el-input></el-form-item>
          </el-form>
        </el-col>
        <el-col :offset="2" :span="4">
            <el-avatar
              shape="square"
              :size="150"
              fit="cover"
              :src="userForm.headPic"
            ></el-avatar>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getUserAll, deleteUser, updateUserProfile, getUserById, updateAuthorities } from '@/api/user'
import { Message } from 'element-ui'
export default {
  name: 'UserList',
  components: {},
  props: {},
  data () {
    return {
      query: { // 搜索请求参数
        id: '',
        authorities: ''
      },
      updateQuery: { // 更新请求参数
        id: '',
        authorities: ''
      },
      userForm: {},
      page: 1,
      size: 10,
      total: 0, // 总页数
      userList: [], // 用户列表
      roleList: [], // 用户权限列表
      isSearching: false, // 搜索用户loading
      isAdding: false, // 添加用户loading
      isEditing: false, // 修改用户loading
      isGetting: false, // 获取用户loading
      isDeleting: false, // 删除用户loading
      isEcho: false, // 用户表单回显loading
      isDisable: false, // 权限选择是否展示
      dialogFormVisible: false, // 弹出框开关
      inputVisible: false, // 增加权限标签输入开关
      inputValue: '', // 编辑权限输入框内容
      expands: [], // 展开行集合
      authoritieList: [], // 可选权限集合
      getRowKeys (row) { // 返回展开行唯一标识
        return row.id
      },
      value: '' // 权限选择下拉框选中值
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getUserList()
  },
  mounted () {
  },
  methods: {
    async getUserList () {
      this.isSearching = true
      await getUserAll(this.page, this.size, this.query).then(resp => {
        if (resp.data.code === 20000) {
          // 保存用户数据
          this.userList = resp.data.data.records
          this.total = resp.data.data.total
          Message({
            type: 'success',
            message: resp.data.message
          })
        } else {
          Message({
            type: 'error',
            message: resp.data.message
          })
        }
      })
      this.isSearching = false
    },
    async deleteUser (id) {
      console.log('id+' + id)
      this.isDeleting = true
      await deleteUser(id).then(resp => {
        if (resp.data.code === 20000) {
          // 更新用户列表数据
          this.getUserList()
          Message({
            type: 'success',
            message: resp.data.message
          })
        } else {
          Message({
            type: 'error',
            message: resp.data.message
          })
        }
      })
      this.isDeleting = false
    },
    findUserOne (row) {
      // 根据ID查询用户信息
      getUserById(row.id).then(resp => {
        if (resp.data.code === 20000) {
          // 数据回显
          this.userForm = resp.data.data
          Message({
            type: 'success',
            message: resp.data.message
          })
        } else {
          Message({
            type: 'error',
            message: resp.data.message
          })
        }
      })
      // 打开弹窗
      this.dialogFormVisible = true
    },
    update (user) {
      updateUserProfile(user).then(resp => {
        if (resp.data.code === 20000) {
          // 更新用户列表数据
          this.getUserList()
          Message({
            type: 'success',
            message: resp.data.message
          })
        } else {
          Message({
            type: 'error',
            message: resp.data.message
          })
        }
      })
    },
    closeForm () {
      this.userForm = {}
    },
    handleClose (tag, index, username) {
      // 关闭标签 ==> 删除用户权限
      const roleList = this.userList[index].authorities.split(',')
      roleList.splice(roleList.indexOf(tag), 1)
      this.userList[index].authorities = roleList.join(',')
      this.updateQuery.authorities = this.userList[index].authorities
      this.updateQuery.username = username
      // 更新数据
      updateAuthorities(
        this.updateQuery
      ).then(resp => {
        if (resp.data.code === 20000) {
          Message({
            type: 'success',
            message: resp.data.message
          })
        } else {
          Message({
            type: 'error',
            message: resp.data.message
          })
          // 更新数据
          this.getUserList()
        }
      })
    },
    handleInputConfirm (index, id) {
      if (this.inputValue.length !== 0) {
        // 添加用户权限
        const roleList = this.userList[index].authorities.split(',')
        this.updateQuery.authorities = this.userList[index].authorities
        const inputValue = this.inputValue
        if (inputValue.length) {
          roleList.push(inputValue)
        }
        this.userList[index].authorities = roleList.join(',')
        this.updateQuery.id = id
        this.updateQuery.authorities = this.userList[index].authorities
        updateAuthorities(
          this.updateQuery
        ).then(resp => {
          if (resp.data.code === 20000) {
            // 更新用户列表数据成功
            Message({
              type: 'success',
              message: resp.data.message
            })
          } else {
            Message({
              type: 'error',
              message: resp.data.message
            })
            // 更新数据
            this.getUserList()
          }
        })
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    showInput () {
      this.inputVisible = true
      // this.$nextTick(_ => {
      //   this.$refs.saveTagInput.$refs.input.focus()
      // })
    },
    // table每次只能展开一行
    // 展开行变化时触发
    expandSelect (row, expandedRows) {
      var that = this
      // 只展开一行
      if (expandedRows.length) { // 说明展开了
        that.expands = []
        if (row) {
          that.expands.push(row.id) // 只展开当前行id
        }
      } else { // 说明收起了
        that.expands = []
      }
    },
    // 折叠面板每次只能展开一行
    // expandSelect (row, expandedRows) {
    //   console.log('expands ' + this.expands)
    //   console.log('getRowKeys ' + this.getRowKeys)
    // },
    pageChange () {
      // 页码改变触发
      this.goodList()
    }
  }
}
</script>

<style lang="less">
  .el-dialog__body {
    padding: 30px 20px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
    overflow: auto;
    height: 300px;
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px !important;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px !important;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .page{
    float: right;
    margin-top: 20px;
  }
</style>
